<template>
	<div class="row mt-3">
		<div class="col-md-12 col-lg-12">
			<div class="card">
				<div class="card-body">
					<img class="mx-auto d-block" src="../assets/logo.png" alt="">
					<form @submit.prevent="onSubmit">
						<div class="form-group">
							<label for="email">邮箱</label>
							<input type="email" class="form-control" v-model="email">
						</div>
						<div class="form-group">
							<label for="password">密码</label>
							<input type="password" class="form-control" v-model="password">
						</div>
						<button type="submit" class="btn btn-block btn-success">登录</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default{
		data(){
			return{
				email:'',
				password:'',
				
			}
		},
		// 组件内的守卫 当进入登录页面的时候会调用next方法 只有调用了才可以跳转
		beforeRouteEnter(to,from,next) {
			window.localStorage.clear("Login")
			next(vm=>{
				vm.$store.dispatch('setUser',null)
			})
		},
		methods:{
		async	onSubmit(){
				axios.get('/mock/register/register.json').then(res=>{
					console.log(res)
					if(res.data.data.email===this.email&&res.data.data.password===this.password){
						this.$store.dispatch('setUser',res.data.data.email)
						
					let Login={"email":this.email,"password":this.password
					}
					window.localStorage.setItem('Login',JSON.stringify(Login))
					 this.$router.push('/home')
					}else{
						alert('账号或密码错误')
						this.$store.dispatch('setUser',null)
						this.email=''
						this.password=''
					}
					
				})
		
			},
		
		}
	}
</script>

<style>
</style>
